<template>
	<view>
		<view class="head">
			<!-- <view class="h_top">
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u844.png"
					mode=""></image>
				<text>充值记录</text>
			</view> -->
			<view class="h_bottom">
				<text class="check" @click="chance">充值</text>
				<text class="checked">充值记录</text>
			</view>
		</view>
		
		<view class="records">
			<view class="rc_list" v-for="(v,i) in recordslist" :key="v.time">
				<view class="rc_list_l">
					<view class="">{{v.content}}</view>
					<view class="">{{v.balance}}</view>
				</view>
				<view class="rc_list_r">
					<view class="">{{v.status}}</view>
					<view class="">{{v.time}}</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import http from '../../utils/http';
	export default {
		data() {
			return {
				recordslist:[],
				userid:''
			}
		},
		methods: {
			chance(){
				uni.navigateTo({
					url:'/pages/balance/balance'
				})
			}
		},
		onShow() {
			this.userid=uni.getStorageSync("userid");
			http({
				url:'/getRecharge',
				method:'post',
				data:{
					userid:this.userid
				},
				success:(res)=>{
					console.log(res.data);
					this.recordslist=res.data.msg;
				}
			})
		}
	}
</script>

<style>
	.head {
		/* display: flex;
		justify-content: space-around; */
		width: 750rpx;
		top: 0;
		position: sticky;
		background: white;
		/* padding-top: 50rpx; */
	}
	/* .h_top image {
		display: inline-block;
		width: 20rpx;
		height: 32rpx;
	}
	
	.h_top text {
		width: 650;
		display: inline-block;
		text-align: center;
	} */
	.h_bottom {
		display: flex;
		justify-content: space-around;
	}
	.checked {
		border-bottom: 2px solid rgba(247, 114, 20, 1);
		color: #F77214;
		padding-bottom: 20rpx;
	}
	.check {
		padding-bottom: 20rpx;
		color: #999;
	}
	.rc_list {
		width: 690rpx;
		height: 100rpx;
		padding: 30rpx;
		background: white;
		border-top: 1px solid rgba(242, 242, 242, 1);
		display: flex;
		justify-content: space-between;
	}
	
	.rc_list .rc_list_l {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.rc_list .rc_list_l view:nth-child(1) {
		font-size: 30rpx;
	}
	
	.rc_list .rc_list_l view:nth-child(2) {
		font-size: 30rpx;
		color: #999;
	}
	
	.rc_list_r {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.rc_list_r view:nth-child(1) {
		font-size: 30rpx;
		color: #333;
	}
	
	.rc_list_r view:nth-child(2) {
		font-size: 30rpx;
		color: #ccc;
	}
</style>
